94:I[903690,["/chat-static/_next/static/immutable/chunks/2yn416zt2ymb9.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/3r0_oixh4x4tv.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/2p9ctj7pk72l5.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/3fcrlgcb4a1y6.js","/chat-static/_next/static/immutable/chunks/26zxim54jidf1.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/1kxrhcelrhibx.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/3elayl0c5orfd.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2d3ect6vv16p1.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2e6woq6v13noj.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/3kotfokq-quij.js","/chat-static/_next/static/immutable/chunks/22b0_jjnq2qq5.js","/chat-static/_next/static/immutable/chunks/09qt2tf69cbel.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/3g3qt_nenytmh.js"],"ExplicitChatIdProvider"] 95:I[838238,["/chat-static/_next/static/immutable/chunks/2yn416zt2ymb9.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/3r0_oixh4x4tv.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/2p9ctj7pk72l5.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/3fcrlgcb4a1y6.js","/chat-static/_next/static/immutable/chunks/26zxim54jidf1.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/1kxrhcelrhibx.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/3elayl0c5orfd.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2d3ect6vv16p1.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2e6woq6v13noj.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/3kotfokq-quij.js","/chat-static/_next/static/immutable/chunks/22b0_jjnq2qq5.js","/chat-static/_next/static/immutable/chunks/09qt2tf69cbel.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/3g3qt_nenytmh.js"],"SWRDataProvider"] 96:T4168,[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@paper-design/shaders-react": "0.0.53" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" const MONTHS = [ { name: "September", year: 2025, days: 30, startDay: 1 }, // Sept 1, 2025 is a Monday (1) { name: "October", year: 2025, days: 31, startDay: 3 }, // Oct 1, 2025 is a Wednesday (3) { name: "November", year: 2025, days: 30, startDay: 6 }, // Nov 1, 2025 is a Saturday (6) { name: "December", year: 2025, days: 31, startDay: 1 }, // Dec 1, 2025 is a Monday (1) ] const WEEKDAYS = ["S", "M", "T", "W", "T", "F", "S"] export default function MinimalCalendar() { const [markedDates, setMarkedDates] = useState>({}) useEffect(() => { const savedDates = localStorage.getItem("calendar-marked-dates") if (savedDates) { try { setMarkedDates(JSON.parse(savedDates)) } catch (error) { console.error("Failed to parse saved dates:", error) } } }, []) useEffect(() => { localStorage.setItem("calendar-marked-dates", JSON.stringify(markedDates)) }, [markedDates]) const today = new Date() const todayKey = `${today.toLocaleString("default", { month: "long" })}-${today.getDate()}` const isDateInFuture = (month: string, day: number) => { const dateToCheck = new Date(2025, MONTHS.findIndex((m) => m.name === month) + 8, day) // +8 because Sept is month 9 (0-indexed) return dateToCheck > today } const toggleDate = (dateKey: string, month: string, day: number) => { if (isDateInFuture(month, day)) return setMarkedDates((prev) => { const current = prev[dateKey] if (!current) return { ...prev, [dateKey]: "yes" } if (current === "yes") return { ...prev, [dateKey]: "no" } const { [dateKey]: _, ...rest } = prev return rest }) } const getDateKey = (month: string, day: number) => `${month}-${day}` const calculateStats = () => { const totalDays = MONTHS.reduce((sum, month) => sum + month.days, 0) const markedCount = Object.keys(markedDates).length const yesCount = Object.values(markedDates).filter((status) => status === "yes").length const noCount = Object.values(markedDates).filter((status) => status === "no").length const unmarkedCount = totalDays - markedCount const calculateStreaks = () => { const sortedDates = Object.entries(markedDates) .map(([key, status]) => { const [monthName, dayStr] = key.split("-") const monthIndex = MONTHS.findIndex((m) => m.name === monthName) const day = Number.parseInt(dayStr) return { monthIndex, day, status, date: new Date(2025, monthIndex + 8, day) } }) .sort((a, b) => a.date.getTime() - b.date.getTime()) let currentYesStreak = 0 let currentNoStreak = 0 let longestYesStreak = 0 let longestNoStreak = 0 let tempYesStreak = 0 let tempNoStreak = 0 // Calculate current streaks from today backwards const todayDate = new Date() for (let i = sortedDates.length - 1; i >= 0; i--) { const entry = sortedDates[i] if (entry.date <= todayDate) { if (entry.status === "yes") { currentYesStreak = currentYesStreak === 0 ? 1 : currentYesStreak + 1 currentNoStreak = 0 } else if (entry.status === "no") { currentNoStreak = currentNoStreak === 0 ? 1 : currentNoStreak + 1 currentYesStreak = 0 } break } } // Calculate longest streaks for (const entry of sortedDates) { if (entry.status === "yes") { tempYesStreak++ tempNoStreak = 0 longestYesStreak = Math.max(longestYesStreak, tempYesStreak) } else if (entry.status === "no") { tempNoStreak++ tempYesStreak = 0 longestNoStreak = Math.max(longestNoStreak, tempNoStreak) } } return { currentYesStreak, currentNoStreak, longestYesStreak, longestNoStreak } } const calculateMonthlyStats = () => { return MONTHS.map((month) => { const monthEntries = Object.entries(markedDates).filter(([key]) => key.startsWith(month.name)) const monthYes = monthEntries.filter(([, status]) => status === "yes").length const monthNo = monthEntries.filter(([, status]) => status === "no").length const monthMarked = monthEntries.length const monthTotal = month.days const monthCompletion = monthTotal > 0 ? Math.round((monthMarked / monthTotal) * 100) : 0 return { name: month.name.slice(0, 3), yes: monthYes, no: monthNo, marked: monthMarked, total: monthTotal, completion: monthCompletion, } }) } const streaks = calculateStreaks() const monthlyStats = calculateMonthlyStats() return { totalDays, markedCount, yesCount, noCount, unmarkedCount, streaks, monthlyStats, yesPercentage: markedCount > 0 ? Math.round((yesCount / markedCount) * 100) : 0, completionRate: Math.round((markedCount / totalDays) * 100), } } const stats = calculateStats() const renderMonth = (month: (typeof MONTHS)[0]) => { const days = [] // Add empty cells for days before the month starts for (let i = 0; i < month.startDay; i++) { days.push(

) } // Add all days of the month for (let day = 1; day <= month.days; day++) { const dateKey = getDateKey(month.name, day) const status = markedDates[dateKey] const isToday = dateKey === todayKey const isFuture = isDateInFuture(month.name, day) days.push(

, ) } return days } return (

The Great Lock-in of Sep-Dec 2025

{MONTHS.map((month) => (

{month.name.slice(0, 3)}

{WEEKDAYS.map((day) => (

{day}

))}

{renderMonth(month)}

))}

{/* Overall Progress */}

Overall Progress {stats.completionRate}%

{/* Quick Stats Grid */}

{stats.yesCount}

Yes

{stats.noCount}

{stats.unmarkedCount}

Left

{stats.yesPercentage}%

Yes Rate

{/* Streaks */}

Current Streaks

Yes: {stats.streaks.currentYesStreak} days

No: {stats.streaks.currentNoStreak} days

{/* Best Streaks */}

Best Streaks

Yes: {stats.streaks.longestYesStreak} days

No: {stats.streaks.longestNoStreak} days

{/* Monthly Breakdown */}

Monthly Breakdown

{stats.monthlyStats.map((month) => (

{month.name}

{month.yes} / {month.no}

{month.completion}%

))}

) }8a:["$","$L94",null,{"chatId":"f2tgUtINEir","children":["$","$L95",null,{"data":{"@\"active-block\",\"f2tgUtINEir\",":{"id":"b_vA8RcZ6DWkX","messageId":"AcgBJ55MNmBUmwx4coOoLCkeayOP7cns","source":"$96","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"minimal-calendar","type":"code-project","project":"minimal-calendar","taskNameActive":"Adding localStorage","taskNameComplete":"Added localStorage"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"f2tgUtINEir\",":false,"":null},"children":"$L97"}]}]

About

Tags

Share

About

Tags

Share

About

Tags

Share

More from sahaj-jj

More Templates Like This